<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../../../compiled/owg-optimized.js"></script>
	</head>
	
	<script type="text/javascript">
	   //------------------------------------------------------------------------
		function OnKeyDown(context, key)
		{
			var scene = ogGetScene(context);
			var world = ogGetWorld(scene);
			
			if ('1'.charCodeAt(0) == key)
			{
				ogSetRenderEffect(world, OG_RENDEREFFECT_CHROMADEPTH);
			}
			else if ('2'.charCodeAt(0) == key)
			{
				ogSetRenderEffect(world, OG_RENDEREFFECT_RGB);
			}
		}
		//------------------------------------------------------------------------
		function OnRender(context)
		{
			ogSetTextColor(context, 1,0,0);
			ogDrawText(context, "Press 1 for Chroma-Depth Rendering, 2 for RGB", 0, 10);
		}
	   //------------------------------------------------------------------------
	   function main()
	   {
			ogSetArtworkDirectory("../../../art/");
			var context = ogCreateContextFromCanvas("canvas", true);
			var globe = ogCreateGlobe(context);
			ogAddImageLayer(globe, {
				url: ["http://www.openwebglobe.org/data/img"],
				layer: "World500",
				service: "i3d"
			});
			ogAddImageLayer(globe, {
				url: ["http://www.openwebglobe.org/data/img"],
				layer: "LandsatCH",
				service: "i3d"
			});
			ogAddElevationLayer(globe, {
				url: ["http://www.openwebglobe.org/data/elv"],
				layer: "SRTM",
				service: "i3d"
			});
			
			ogSetKeyDownFunction(context, OnKeyDown);
			ogSetRenderFunction(context, OnRender);
		}
		//------------------------------------------------------------------------
	</script>
	
	<body style="padding:0px; margin:0px; overflow:hidden;" onload="main()">
		<div style="width: 100%; height: 100%;">
			<canvas id="canvas">
			</canvas>
		</div>
	</body>
</html>
